<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div class="header">
        <el-row>此订单为代理客户申请您为其代付的订单，请仔细核对相关信息！</el-row>
      </div>
      <el-table v-loading="tableLoading" :data="tableData" border>
        <el-table-column prop="goodsName" label="产品名称" min-width="140" header-align="center" align="center"/>
        <el-table-column label="产品信息" min-width="360">
          <template slot-scope="scope">
            <div class="config">
              <div v-for="(item, index) in scope.row['productInfo']" :key="index">{{ item.name }}：{{ item.value }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="单价" min-width="120" header-align="center" align="center">
          <template slot-scope="scope">
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            {{ (scope.row['goodsPrice']['realTotalCost']/100/scope.row['goodsNum']).toFixed(2) }}元
            <div>&nbsp;</div>
            <div>&nbsp;</div>
          </template>
        </el-table-column>
        <el-table-column prop="goodsNum" label="数量" min-width="80" header-align="center" align="center"/>
        <el-table-column prop="payWay" label="付费方式" min-width="100" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope.row.payerMode===0?'自付':'代付' }}
          </template>
        </el-table-column>
        <!--<el-table-column prop="buyLength" label="购买时长" min-width="120" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope.row['goodsPrice']['timeSpan']?(scope.row['goodsPrice']['timeSpan'] + (scope.row['goodsPrice']['timeUnit']==='m'?'个月':scope.row['goodsPrice']['timeUnit'])):'&#45;&#45;' }}
          </template>
        </el-table-column>-->
        <!--<el-table-column prop="discount" label="优惠" min-width="120" header-align="center" align="center"/>-->
        <el-table-column label="费用" min-width="120" header-align="center" align="center">
          <template slot-scope="scope">
            <div class="cost">{{ (scope.row['goodsPrice']['realTotalCost']/100).toFixed(2) }}元</div>
            <!--<span>{{ (scope.row['goodsPrice']['totalCost']/100).toFixed(2) }}元</span>-->
          </template>
        </el-table-column>
        <el-table-column label="业务员" min-width="100" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope.row.salesName || '--' }}
          </template>
        </el-table-column>
      </el-table>
      <el-row v-if="!isDetails" class="statistics">
        <div>总计费用：<span>￥ {{ (tableData[0]['goodsPrice']['realTotalCost']/100).toFixed(2) }}</span></div>
        <el-button @click="toPayOrder">确认支付</el-button>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showType: '',
      deal_names: '',
      // 表格相关数据
      tableLoading: false,
      tableData: [],
      isDetails: true
    }
  },
  created() {
    // 判断当前页面是否为详情页面
    this.isDetails = this.$router.currentRoute.path.indexOf('details') > -1
    this.showType = this.$router.currentRoute.query['showType'];
    this.deal_names = this.$router.currentRoute.query['deal_names'];
    this.getData();
    // 获取订单内容
    // this.tableData.push(JSON.parse(this.$router.currentRoute.query['row']) || {})
    // console.log(JSON.parse(this.$router.currentRoute.query['row']))
  },
  methods: {
    getData() {
      this.tableLoading = true
      let url = ''
      const data = {
        deal_names: this.deal_names
      }
      // 腾讯云搜索
      if (this.showType === 0) {
        url = 'tencent/selectCustomerCacheOrders'
      } else {
        url = 'tencent/selectCustomerOrders'
      }
      this.$store.dispatch('GetConnect', {url, data}).then(res => {
        this.tableData = res.data.list
        this.tableLoading = false
      }).catch(e => {
        this.tableLoading = false
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    toPayOrder() {
      this.$confirm('此操作将支付该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const url = 'tencent/substitutePayment'
        const temp = [{
          owner_uin: this.tableData[0]['ownerUin'],
          deal_name: this.tableData[0]['dealName'],
          total_price: this.tableData[0]['goodsPrice']['realTotalCost']
        }];
        const data = {
          params: JSON.stringify(temp)
        }
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.$message.success('支付订单成功!')
          this.$router.back()
        }).catch(e => {
          this.$message.error(e.msg)
        })
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../../styles/index.scss';
.box-1 {
  .header {
    padding-bottom: 15px;
    .el-row{
      border: 1px solid $panGreen;
      border-radius: 4px;
      background-color: rgba(22, 219, 195, 0.17);
      padding: 10px 12px;
      font-size: 12px;
      color: $text43;
    }
  }
  span{
    text-decoration-line: line-through;
    font-size: 12px;
    color: $textGray;
  }
  .config {
    line-height: 30px;
  }
  .cost {
    color: #ff9c1c;
    font-size: 18px;
  }
  .statistics{
    padding: 20px;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    .el-button{
      background-color: #ff9c1c;
      color: #fff;
      margin-left: 20px;
    }
    span{
      text-decoration-line: none;
      font-size: 20px;
      color: #ff9c1c;
    }
  }
}
</style>
